<template>
  <div class="login-container">
    <div class="dialog">
      <el-form :label-position="labelPosition" label-width="" :model="formLabelAlign">
        <el-form-item label="">
          <el-input v-model="formLabelAlign.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formLabelAlign.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formLabelAlign.againPassword" placeholder="请再次输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" style="width: 25%;" @click="$router.push('/home')">返回主页</el-button>
          <el-button type="primary" style="width: 70%;" @click="onSubmit">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { postReg } from "../api/reg/index";
export default {
  data() {
    return {
      labelPosition: 'left',
      formLabelAlign: {
        username: '',
        password: '',
        againPassword: ''
      }
    };
  },
  methods: {
    onSubmit() {
      if(this.formLabelAlign.username == '') {
        this.$message.error('用户名不能为空')
        return
      }
      if(this.formLabelAlign.password == '') {
        this.$message.error('密码不能为空')
        return
      }
      if(this.formLabelAlign.password != this.formLabelAlign.againPassword) {
        this.$message.error('两次密码必须相同!')
        return
      }
      postReg(this.formLabelAlign).then((res) => {
        console.log(res.data);
        if(res.data.code == 40000) {
          this.$message.error('用户名已被注册')
        }
        if(res.data.code == 50000){
          this.$message.success('注册成功，即将跳转到登录页面')
          localStorage.setItem('username',res.data.data.username)
          // console.log(localStorage.getItem('username'));
          setTimeout(() => {
            this.$router.push('/login')
          }, 500);
        }
      })
    }
  }
}
</script>

<style scoped>
.dialog {
  width: 400px;
  height: 500px;
  position: absolute;
  left: 50%;
  transform: translateX(-200px);
  top: 15%;
  /* background-color: rgba(255,255,255,.1); */
  backdrop-filter: blur(10px);
  padding: 15px;
  border-radius: 5px;
  font-size: 17px;
}
.el-input__inner{
  background-color: rgba(5, 5, 5, .3) !important;
  color: aliceblue !important;
  border: rgba(5, 5, 5, .3) !important;
  /* background-color: #4d4d34 !important; */
    
}
.el-form-item {
  margin-top: 80px;
}
.el-form-item__label {
  color: aliceblue !important;
  font-size: 17px;
}
</style>